<div id="controls">
  <button id="fast">Fast</button>
  <button id="nsh">Without Native Scrollbar Hiding</button>
  <button id="po">Partially Overlaid</button>
  <button id="fo">Fully Overlaid</button>
  <button id="vpt">Target Is Viewport</button>
  <button id="pa">Padding Absolute</button>
  <br />
  <label for="envHeight">envHeight</label>
  <select name="envHeight" id="envHeight">
    <option value="envHeightHundred">100%</option>
    <option value="envHeightAuto">auto</option>
  </select>
  <label for="envWidth">envWidth</label>
  <select name="envWidth" id="envWidth">
    <option value="envWidthHundred">100%</option>
    <option value="envWidthAuto">auto</option>
  </select>
  <label for="height">height</label>
  <select name="height" id="height">
    <option value="heightAuto">auto</option>
    <option value="heightHundred">100%</option>
    <option value="height200">200px</option>
  </select>
  <label for="width">width</label>
  <select name="width" id="width">
    <option value="widthAuto">auto</option>
    <option value="widthHundred">100%</option>
    <option value="width200">200px</option>
  </select>
  <label for="float">float</label>
  <select name="float" id="float">
    <option value="floatNone">none</option>
    <option value="floatLeft">left</option>
    <option value="floatRight">right</option>
  </select>
  <label for="padding">padding</label>
  <select name="padding" id="padding">
    <option value="paddingNone">none</option>
    <option value="paddingSmall">small</option>
    <option value="paddingLarge">large</option>
  </select>
  <label for="border">border</label>
  <select name="border" id="border">
    <option value="borderNone">none</option>
    <option value="borderSmall">small</option>
    <option value="borderLarge">large</option>
  </select>
  <label for="margin">margin</label>
  <select name="margin" id="margin">
    <option value="marginNone">none</option>
    <option value="marginSmall">small</option>
    <option value="marginLarge">large</option>
  </select>
  <label for="boxSizing">boxSizing</label>
  <select name="boxSizing" id="boxSizing">
    <option value="boxSizingBorderBox">border-box</option>
    <option value="boxSizingContentBox">content-box</option>
  </select>
  <label for="direction">direction</label>
  <select name="direction" id="direction">
    <option value="directionLTR">ltr</option>
    <option value="directionRTL">rtl</option>
  </select>
  <label for="minMax">minMax</label>
  <select name="minMax" id="minMax">
    <option value="minMaxFixed">fixed</option>
    <option value="minMaxNone">none</option>
  </select>
  <br />
  <button id="start">start</button>
  <span>UsedOptions: <span id="options">0</span></span>
  <span>Detected updates: <span id="updates">0</span></span>
</div>
<div id="stage">
  <div>
    <div class="columns">
      <div class="column">
        <div class="env">
          <div id="target" class="container">
            <div class="resize">Resize</div>
            <div class="percent">50%</div>
            <div class="textwrap">textwraptextwraptextwraptextwraptex</div>
            <div class="end">End</div>
          </div>
        </div>
        <pre id="targetMetrics" class="metrics"></pre>
      </div>
      <div class="column">
        <div class="env">
          <div id="comparison" class="container">
            <div class="resize">Resize</div>
            <div class="percent">50%</div>
            <div class="textwrap">textwraptextwraptextwraptextwraptex</div>
            <div class="end">End</div>
          </div>
        </div>
        <pre id="comparisonMetrics" class="metrics"></pre>
      </div>
    </div>
  </div>
</div>
<!-- 

  <script src="https://polyfill.io/v3/polyfill.min.js?features=Intl%2Cblissfuljs%2Cdefault%2Cdom4%2C%7Eviewport%2C%7Ehtml5-elements%2Cwindow.scrollBy%2Cwindow.scroll%2Cviewport%2Cscroll%2Csmoothscroll%2CsetImmediate%2CscrollY%2CscrollX%2CscrollIntoView%2CscrollBy%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019%2Ces2020%2Ces2021%2Ces2022%2Ces7%2Ces6%2Ces5%2CObject.assign%2CObject.create%2CObject.defineProperties%2CObject.defineProperty%2CObject.entries%2CObject.freeze%2CObject.fromEntries%2CObject.getOwnPropertyDescriptor%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyNames%2CObject.getOwnPropertySymbols%2CObject.getPrototypeOf%2CObject.is%2CObject.isExtensible%2CObject.isFrozen%2CObject.isSealed%2CObject.keys%2CObject.preventExtensions%2CObject.seal%2CObject.setPrototypeOf%2CObject.values%2CPageVisibility%2CArray.prototype.values%2CArray.prototype.sort%2CArray.prototype.some%2CArray.prototype.reduceRight%2CArray.prototype.reduce%2CArray.prototype.map%2CArray.prototype.lastIndexOf%2CArray.prototype.keys%2CArray.prototype.indexOf%2CArray.prototype.includes%2CArray.prototype.forEach%2CArray.prototype.flatMap%2CArray.prototype.flat%2CAbortController%2CAggregateError%2CArray.from%2CArray.isArray%2CArray.of%2CArray.prototype.%40%40iterator%2CArray.prototype.at%2CArray.prototype.copyWithin%2CArray.prototype.entries%2CArray.prototype.every%2CArray.prototype.fill%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArrayBuffer%2CArrayBuffer.isView%2CAudioContext%2CBlob%2CCSS.supports%2CCustomEvent%2CDOMRect%2CDOMRect.fromRect%2CDOMTokenList%2CDOMTokenList.prototype.%40%40iterator%2CDOMTokenList.prototype.forEach%2CDOMTokenList.prototype.replace%2CNodeList.prototype.forEach%2CNodeList.prototype.%40%40iterator%2CNode.prototype.isSameNode%2CNode.prototype.contains%2CNavigator.prototype.geolocation%2CNumber.EPSILON%2CNumber.Epsilon%2CNumber.MAX_SAFE_INTEGER%2CNumber.MIN_SAFE_INTEGER%2CNumber.isFinite%2CNumber.isInteger%2CNumber.isNaN%2CNumber.isSafeInteger%2CNumber.parseFloat%2CNumber.parseInt%2CMediaQueryList.prototype.removeEventListener%2CMediaQueryList.prototype.addEventListener%2CMath.trunc"></script>

-->
